<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
 <script src="js/jquery-1.8.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<title>无标题文档</title>
<style>
body{
	padding :40px;
}
</style>
</head>
<body>
<!-- 顶部导航条 -->
<div class="span12 pricehover">
   <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container-fluid">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">Project name</a>
        <div class="nav-collapse">
          <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="nav-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-search pull-left" action="">
            <input type="text" class="search-query span2" placeholder="Search">
          </form>
          <form class="navbar-form pull-right">
		  <input type="text" class="span2">
		  <button type="submit" class="btn">Submit</button>
		  </form>
          <ul class="nav pull-right">
            <li><a>Link</a></li>
            <li class="divider-vertical"></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div>
    </div><!-- /navbar-inner -->
  </div><!-- /navbar -->
</div>
<div class="container-fluid">
	<div class="row-fluid">
		<div class="span12">
			<div class="page-header">
				<h1>
					页标题范例 <small>此处编写页标题</small>
				</h1>
			</div>
			<div class="row-fluid">
				<div class="span2">
					<div class="alert">
						 <button type="button" class="close" data-dismiss="alert">×</button>
						<h4>
							提示!
						</h4> <strong>警告!</strong> 请注意你的个人隐私安全.
					</div>
					<ul>
						<li>
							新闻资讯
						</li>
						<li>
							体育竞技
						</li>
						<li>
							娱乐八卦
						</li>
						<li>
							前沿科技
						</li>
						<li>
							环球财经
						</li>
						<li>
							天气预报
						</li>
						<li>
							房产家居
						</li>
						<li>
							网络游戏
						</li>
					</ul>
				</div>
				<div class="span6">
					<div class="navbar">
						<div class="navbar-inner">
							<div class="container">
								 <a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a> <a href="#" class="brand">网站名</a>
								<div class="nav-collapse collapse navbar-responsive-collapse">
									<ul class="nav">
										<li class="active">
											<a href="#">主页</a>
										</li>
										<li>
											<a href="#">链接</a>
										</li>
										<li>
											<a href="#">链接</a>
										</li>
										<li class="dropdown">
											 <a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单<strong class="caret"></strong></a>
											<ul class="dropdown-menu">
												<li>
													<a href="#">下拉导航1</a>
												</li>
												<li>
													<a href="#">下拉导航2</a>
												</li>
												<li>
													<a href="#">子菜单</a>
												</li>
												<li class="divider">
												</li>
												<li class="nav-header">
													标签
												</li>
												<li>
													<a href="#">链接1</a>
												</li>
												<li>
													<a href="#">链接2</a>
												</li>
											</ul>
										</li>
									</ul>
									<ul class="nav pull-right">
										<li>
											<a href="#">右边链接</a>
										</li>
										<li class="divider-vertical">
										</li>
										<li class="dropdown">
											 <a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单<strong class="caret"></strong></a>
											<ul class="dropdown-menu">
												<li>
													<a href="#">下拉导航1</a>
												</li>
												<li>
													<a href="#">下拉导航2</a>
												</li>
												<li class="dropdown-submenu">
													<a href="#">子菜单</a>
													<ul class="dropdown-menu">
														<li><a href="#">子菜单1</a></li>
														<li><a href="#">子菜单2</a></li>
													</ul>
												</li>
												<li class="divider">
												</li>
												<li>
													<a href="#">链接3</a>
												</li>
											</ul>
										</li>
									</ul>
								</div>
								
							</div>
						</div>
						
					</div>
					<div class="carousel slide" id="carousel-37724">
						<ol class="carousel-indicators">
							<li data-slide-to="0" data-target="#carousel-37724">
							</li>
							<li data-slide-to="1" data-target="#carousel-37724">
							</li>
							<li data-slide-to="2" data-target="#carousel-37724" class="active">
							</li>
						</ol>
						<div class="carousel-inner">
							<div class="item">
								<img alt="" src="img/1.jpg" />
								<div class="carousel-caption">
									<h4>
										棒球
									</h4>
									<p>
										棒球运动是一种以棒打球为主要特点，集体性、对抗性很强的球类运动项目，在美国、日本尤为盛行。
									</p>
								</div>
							</div>
							<div class="item">
								<img alt="" src="img/2.jpg" />
								<div class="carousel-caption">
									<h4>
										冲浪
									</h4>
									<p>
										冲浪是以海浪为动力，利用自身的高超技巧和平衡能力，搏击海浪的一项运动。运动员站立在冲浪板上，或利用腹板、跪板、充气的橡皮垫、划艇、皮艇等驾驭海浪的一项水上运动。
									</p>
								</div>
							</div>
							<div class="item active">
								<img alt="" src="img/3.jpg" />
								<div class="carousel-caption">
									<h4>
										自行车
									</h4>
									<p>
										以自行车为工具比赛骑行速度的体育运动。1896年第一届奥林匹克运动会上被列为正式比赛项目。环法赛为最著名的世界自行车锦标赛。
									</p>
								</div>
							</div>
						</div> <a data-slide="prev" href="#carousel-37724" class="left carousel-control">‹</a> <a data-slide="next" href="#carousel-37724" class="right carousel-control">›</a>
					</div>
					<ul class="thumbnails">
						<li class="span4">
							<div class="thumbnail">
								<img alt="300x200" src="img/people.jpg" />
								<div class="caption">
									<h3>
										冯诺尔曼结构
									</h3>
									<p>
										也称普林斯顿结构，是一种将程序指令存储器和数据存储器合并在一起的存储器结构。程序指令存储地址和数据存储地址指向同一个存储器的不同物理位置。
									</p>
									<p>
										<a class="btn btn-primary" href="#">浏览</a> <a class="btn" href="#">分享</a>
									</p>
								</div>
							</div>
						</li>
						<li class="span4">
							<div class="thumbnail">
								<img alt="300x200" src="img/city.jpg" />
								<div class="caption">
									<h3>
										哈佛结构
									</h3>
									<p>
										哈佛结构是一种将程序指令存储和数据存储分开的存储器结构，它的主要特点是将程序和数据存储在不同的存储空间中，进行独立编址。
									</p>
									<p>
										<a class="btn btn-primary" href="#">浏览</a> <a class="btn" href="#">分享</a>
									</p>
								</div>
							</div>
						</li>
						<li class="span4">
							<div class="thumbnail">
								<img alt="300x200" src="img/sports.jpg" />
								<div class="caption">
									<h3>
										改进型哈佛结构
									</h3>
									<p>
										改进型的哈佛结构具有一条独立的地址总线和一条独立的数据总线，两条总线由程序存储器和数据存储器分时复用，使结构更紧凑。
									</p>
									<p>
										<a class="btn btn-primary" href="#">浏览</a> <a class="btn" href="#">分享</a>
									</p>
								</div>
							</div>
						</li>
					</ul>
					<div class="pagination">
						<ul>
							<li>
								<a href="#">上一页</a>
							</li>
							<li>
								<a href="#">1</a>
							</li>
							<li>
								<a href="#">2</a>
							</li>
							<li>
								<a href="#">3</a>
							</li>
							<li>
								<a href="#">4</a>
							</li>
							<li>
								<a href="#">5</a>
							</li>
							<li>
								<a href="#">下一页</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="span4">
					<form class="form-search">
						<input class="input-medium search-query" type="text" /> <button type="submit" class="btn">查找</button>
					</form>
					<div class="accordion" id="accordion-819494">
						<div class="accordion-group">
							<div class="accordion-heading">
								 <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-819494" href="#accordion-element-399188">选项卡 #1</a>
							</div>
							<div id="accordion-element-399188" class="accordion-body collapse in">
								<div class="accordion-inner">
							      <ul class="nav nav-list">
							        <li><a href="#"><i class="icon-home"></i>Home</a></li>
							        <li><a href="#"><i class="icon-user"></i>Profile</a></li>
							        <li><a href="#"><i class="icon-flag"></i>Messages</a></li>
							       	<li><a href="#"><i class="icon-home"></i>Home</a></li>
							        <li><a href="#"><i class="icon-user"></i>Profile</a></li>
							        <li><a href="#"><i class="icon-flag"></i>Messages</a></li>
							        <li><a href="#"><i class="icon-home"></i>Home</a></li>
							        <li><a href="#"><i class="icon-user"></i>Profile</a></li>
							        <li><a href="#"><i class="icon-flag"></i>Messages</a></li>
							      </ul>
								</div>
							</div>
						</div>
						<div class="accordion-group">
							<div class="accordion-heading">
								 <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-819494" href="#accordion-element-30975">选项卡 #2</a>
							</div>
							<div id="accordion-element-30975" class="accordion-body collapse in">
								<div class="accordion-inner">
							      <ul class="nav nav-list">
							        <li><a href="#"><i class="icon-home"></i>Home</a></li>
							        <li><a href="#"><i class="icon-user"></i>Profile</a></li>
							        <li><a href="#"><i class="icon-flag"></i>Messages</a></li>
							       	<li><a href="#"><i class="icon-home"></i>Home</a></li>
							        <li><a href="#"><i class="icon-user"></i>Profile</a></li>
							        <li><a href="#"><i class="icon-flag"></i>Messages</a></li>
							        <li><a href="#"><i class="icon-home"></i>Home</a></li>
							        <li><a href="#"><i class="icon-user"></i>Profile</a></li>
							        <li><a href="#"><i class="icon-flag"></i>Messages</a></li>
							      </ul>
								</div>
							</div>
						</div>
					</div>
					<table class="table table-condensed table-hover table-bordered">
						<thead>
							<tr>
								<th>
									编号
								</th>
								<th>
									产品
								</th>
								<th>
									交付时间
								</th>
								<th>
									状态
								</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>
									1
								</td>
								<td>
									TB - Monthly
								</td>
								<td>
									01/04/2012
								</td>
								<td>
									Default
								</td>
							</tr>
							<tr class="success">
								<td>
									1
								</td>
								<td>
									TB - Monthly
								</td>
								<td>
									01/04/2012
								</td>
								<td>
									Approved
								</td>
							</tr>
							<tr class="error">
								<td>
									2
								</td>
								<td>
									TB - Monthly
								</td>
								<td>
									02/04/2012
								</td>
								<td>
									Declined
								</td>
							</tr>
							<tr class="warning">
								<td>
									3
								</td>
								<td>
									TB - Monthly
								</td>
								<td>
									03/04/2012
								</td>
								<td>
									Pending
								</td>
							</tr>
							<tr class="info">
								<td>
									4
								</td>
								<td>
									TB - Monthly
								</td>
								<td>
									04/04/2012
								</td>
								<td>
									Call in to confirm
								</td>
							</tr>
						</tbody>
					</table>
					<form>
						<fieldset>
							 <legend>表单项</legend> <label>表签名</label><input type="text" /> <span class="help-block">这里填写帮助信息.</span> <label class="checkbox"><input type="checkbox" /> 勾选同意</label> <button type="submit" class="btn">提交</button>
						</fieldset>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>